/**
 * 项目顶部组件，顶部所有逻辑可以放在这里处理
 * 可以写成无状态组件
 */
import React, { Component } from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'

import LinearGradient from '../components/LinearGradient'
import Config from '../utils/config.js'

import HeaderTool from './HeaderTool'
import HeaderUser from './HeaderUser'
import * as actions from '../actionTypes'

const Container = styled(LinearGradient)`
    position: relative;
    z-index: ${Config.headerIndex};

    height: ${Config.headerHeight}px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 ${Config.headerHeight}px;
`

class Header extends Component {
    state = {
        userface: null,
    }
    logoutUser() {
        this.props.dispatch({
            type: actions.LOGOUT_USER,
        })
    }

    handleSaveProject() {
        this.props.dispatch({
            type: actions.SAVE_PROJECT,
        })
    }

    handleNewProject() {
        this.props.dispatch({
            type: actions.CREATE_NEW_PROJECT,
        })
    }

    handleSaveAsProject() {
        this.props.dispatch({
            type: actions.SAVE_PROJECT_AS,
        })
    }

    changeProjectName(e) {
        this.props.dispatch({
            type: actions.CHANGE_PROJECT_NAME,
            payload: e.target.value,
        })
    }

    openLogin() {
        this.props.dispatch({
            type: actions.TOGGLE_LOGIN_MODAL,
            payload: {
                isOpen: true,
                isLogin: true,
            },
        })
    }

    openRegister() {
        this.props.dispatch({
            type: actions.TOGGLE_LOGIN_MODAL,
            payload: {
                isOpen: true,
                isLogin: false,
            },
        })
    }

    openPublish() {
        this.props.dispatch({
            type: actions.SAVE_PROJECT,
            publish: true,
        })
    }

    openProject() {
        this.props.dispatch({
            type: actions.OPEN_PROJECT_MODAL,
            payload: true,
        })
    }
    render() {
        const { projectName, saveStatus } = this.props.project
        const { userInfo } = this.props.user
        const isLogined = userInfo.userName ? true : false
        return (
            <Container>
                <HeaderTool
                    projectName={projectName ? projectName : ''}
                    saveStatus={saveStatus}
                    changeProjectName={this.changeProjectName.bind(this)}
                    openPublish={this.openPublish.bind(this)}
                    openProject={this.openProject.bind(this)}
                    onSaveProject={this.handleSaveProject.bind(this)}
                    onNewProject={this.handleNewProject.bind(this)}
                    onSaveAsProject={this.handleSaveAsProject.bind(this)}
                />
                <HeaderUser
                    isLogined={isLogined}
                    userFace={isLogined ? userInfo.avatarImageURL : false}
                    userName={isLogined ? userInfo.userName : false}
                    logoutUser={this.logoutUser.bind(this)}
                    openLogin={this.openLogin.bind(this)}
                    openRegister={this.openRegister.bind(this)}
                />
            </Container>
        )
    }
}

export default connect(state => state)(Header)



// WEBPACK FOOTER //
// ./src/containers/Header.js